Tailwindcss(v4) 우선순위 정리

마지막 수정일: 2025. 09. 01.

TL;DR

  1. 레이어 순서: base → components → utilities → (레이어 바깥 CSS)  
  2. 특이성: !important > inline style > id > class/attr/pseudo-class > tag > *  
  3. 동일 특이성: 나중에 나온 규칙이 이긴다.  
  4. Tailwind v4 유틸은 보통 :where(.text-*)로 만들어져 특이성 0이다.  
  5. 전역 태그 선택자(span {})는 특이성 1이라 유틸을 이길 수 있다 → 필요하면 @layer base {} 안으로.

1) Tailwind의

Tailwind는 기본적으로 3개의 레이어를 사용합니다:

  1. @layer base  
       - reset/normalize, 태그 전역 스타일(html, body, h1…)  
       - 예:

 

CSS 
     @layer base {
       body { @apply text-gray-800; }
       h1 { @apply text-2xl font-bold; }
     }
  1. @layer components

 

   - 재사용 컴포넌트 스타일(버튼, 카드 등)  

   - 예:  

     ```css

     @layer components {

       .btn { @apply px-3 py-2 rounded bg-blue-500 text-white; }

     }

     ```

  1. @layer utilities

 

   - text-*, bg-*, flex, mt-4 같은 유틸리티 클래스들  

   - 일반적으로 가장 마지막에 로드되어 base/components보다 우선한다.

중요:  

@layer 바깥(그냥 global.css에 쓴) 스타일은 이 세 레이어보다 뒤에 위치합니다. 즉, 레이어 밖 CSS가 가장 강력해질 수 있어요(특이성/순서 측면에서).

2) “레이어 밖(unlayered) CSS”는 어디에 놓이나?

  • Tailwind가 출력한 base → components → utilities 뒤에 그냥 작성된 CSS가 온다고 보면 됩니다.  

  • 그래서 span { color: ... } 같은 전역 태그 규칙을 레이어 밖에 두면 text-… 유틸을 쉽게 덮어버립니다.  

  • 해결: 전역 태그 스타일은 가급적 @layer base {} 안으로.

3)

(높음 → 낮음)

  • !important (중요도)

  • inline style: <div style="color:red">

  • ID 선택자: #app

  • Class/속성/의사클래스: .card, [type="button"], :hover, :focus

  • 태그(타입) 선택자: div, span, h1

  • * (universal)